<template>
	<view class="">

		<view class="serviceDetails">

			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<!-- 评价列表 -->
				<view class="evaluateList" v-for="(item,index) in list" :key="index">
					<view class="">
						<view class="flex-start-center">
							<image class="img" :src="item.avatar" mode=""></image>
							<view class="margin-left_10rpx">
								<view class="font-weight " style="margin-bottom: 10rpx;">
									{{item.nickname}}
									{{scoreStatusFn(Number(item.technology_score),Number(item.service_score),Number(item.voice_score))}}
								</view>
								<view class="flex">

									<uni-rate v-model="averageScore" :readonly="true" @change="onChange" />
									<view style="color: rgb(151, 151, 151);margin-left: 15rpx;">
										技术:{{item.technology_score}}
										服务:{{item.service_score}} 声音:{{item.voice_score}}</view>


								</view>
							</view>
						</view>
						<view class="detailsText">
							<view class="">
								{{item.evaluate}}
							</view>
							<view class="" @click.stop="imgScare(item.evaluate_img)">
								<image class="evaluateImg" :src="item.evaluate_img" mode=""></image>
							</view>
						</view>

					</view>
				</view>
			</mescroll-body>
		</view>

	</view>
</template>

<script>
	import numSelect from '../../components/poiuy-numSelect/numSelect.vue'
	export default {
		components: {
			numSelect
		},
		data() {
			return {
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: 0,
				rateValue: 5,
				serviceDetails: null,
				userInfo: uni.getStorageSync("userInfo"),
				isHost: false,
				autoplay: true,
				interval: 3000,
				tabIndex: 0,
				technology_score: '',
				service_score: "",
				voice_score: '',
				heightSystemss: 0,
				listPoster: [{

					img: 'http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-11/1b5f0202406111537307450.png'
				}],
				userInfoObject: null,
				serviceCommentList: [],
				averageScore: '',
				uid: '',
				list: []


			}
		},
		// computed: {



		// },
		computed: {
			// scoreStatusFn: function() {
			// 	let technology_score = Number(this.item.technology_score);
			// 	let service_score = Number(this.item.service_score);
			// 	let voice_score = Number(this.item.voice_score);

			// 	return Math.floor((technology_score + service_score + voice_score) / 3).toFixed(2);
			// }
			scoreStatusFn() {
				return function(technology_score, service_score, voice_score) {
					let score

					score = (((technology_score + service_score + voice_score) / 3).toFixed(2))
					console.log(score)
					this.averageScore = score

					return ''


				}
			},
			scoreStatusTotalFn() {
				return function(scoreTotal, commentNumber, name) {
					let score

					score = ((scoreTotal / commentNumber).toFixed(2))
					console.log(score)
					if (name == 'technology_score') {
						this.technology_score = score
					} else if (name == 'service_score') {
						this.service_score = score
					} else {
						this.voice_score = score
					}


					return ''


				}
			},
			scoreStatusTotalsFn() {
				return function(technology_score, service_score, voice_score) {
					let score

					score = (((technology_score + service_score + voice_score) / 3).toFixed(1))


					return score


				}
			}
		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})
		},
		onLoad(options) {
			this.createdgetSystemInfo()
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 1500;
				}
			});
			if (options.uid) {
				this.uid = options.uid

				// 获取评价列表
				// this.serviceCommentListFn()




			}

		},

		methods: {
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			NavBackFn() {
				this.$sun.navBack()
			},
			imgScare(img) {
				console.log(img)
				uni.previewImage({
					urls: [img],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});


			},
			async userInfoFn(uid) {
				const res = await this.$http.post({
					url: this.$api.userInfo,
					data: {

						id: uid

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (res.code == 0) {

					this.userInfoObject = res.data
					console.log(res.data)


				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			},
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.serviceCommentList,
					data: {
						page: scroll.num,
						limit: 10,
						uid: this.uid,



					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {

					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];

					this.list = this.list.concat(result.data.list);

					// 		this.list.forEach((item) => {

					// 			item.labelList = item.label.split(",")
					// 		})



					console.log('this.list', this.list, this.list.length);
				} else {
					this.$sun.toast(result.message, 'none')
				}


			},
			async serviceCommentListFn(uid) {
				const res = await this.$http.post({
					url: this.$api.serviceCommentList,
					data: {

						uid: uid,
						page: 1,
						limit: 100

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (res.code == 0) {


					console.log(res.data.list)
					this.serviceCommentList = res.data.list





				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			},
			async serviceInfoFn(id) {
				const res = await this.$http.post({
					url: this.$api.serviceInfo,
					data: {

						id: id

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (res.code == 0) {

					this.serviceDetails = res.data
					console.log(this.serviceDetails)

					const imgList = res.data.cover_img.split(",")
					this.listPoster = imgList.map(item => {
						return {
							img: item
						}
					})

					// 判断当前是否是搭主
					this.isHost = this.isHostFn(this.serviceDetails.uid, this.userInfo.id)
					// 获取用户详情
					this.userInfoFn(this.serviceDetails.uid)




				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			},



			async addressFn(tiem) {
				console.log(tiem.latitude, tiem.longitude)
				let latMap = Number(tiem.latitude)
				let lngMap = Number(tiem.longitude)
				//纬度
				//经度
				// var longitude = parseFloat(lngMap);
				uni.openLocation({
					latitude: latMap,
					longitude: lngMap,
					success: function() {
						console.log('success');
					}
				});
				// 百度地图经纬度转腾讯地图经纬度
				// var x_pi = 3.14159265358979324;
				// var x = parseFloat(latMap) - 0.0065;
				// var y = parseFloat(lngMap) - 0.006;
				// var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
				// var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
				// var lat = (z * Math.cos(theta)).toFixed(7);
				// var lng = (z * Math.sin(theta)).toFixed(7);
				// //定位地方名称
				// var name = tiem.merchantAddress;
				// const map = await this.$sun.openLocation({
				// 	//拿到上面的计算好的（百度经纬度转腾讯经纬度）经纬度 进行一个赋值
				// 	lat: latMap,
				// 	lng: lngMap,
				// 	name:tiem.merchantAddress, //名称
				// 	address: tiem.merchantAddress, //地址
				// 	key: 'SFABZ-WANWW-FISRY-3IGTF-HV7RE-YSFTI' //腾讯key
				// });
			},
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				// console.log(this.rateValue);
			},
			isHostFn(id, uid) {

				if (id == uid) {
					return true
				} else {
					return false
				}

			},
			serviceItemsFn(id) {
				// this.$refs.serviceItemsPopup.show({
				// 	anim: 'bottom',
				// 	position: 'bottom',
				// 	shadeClose: false, //false使用户不能点击其它关闭页面
				// 	topclose: false,
				// 	zIndex: 99999
				// });

				this.$at.uniDoFunc({
					key: 'submit',
					success: async () => {
						this.$at.lockKey('submit');
						console.log(this.form)


						const result = await this.$http.post({
							url: this.$api.placeServiceOrder,
							data: {
								id: id

							},
							headers: {
								'Authorization': this.userInfo.token
							}

						})
						if (result.code == 0) {

							this.$sun.toast(result.message, 'none')

							setTimeout(() => {
								this.$sun.navBack()
							}, 500)



						} else {
							this.$sun.toast(result.message, 'none')
						}

						this.$at.releaseKey('submit');
					}
				});


			},
			// 关闭购物弹层
			closeWriteOffIcon() {
				this.$refs.serviceItemsPopup.close()
			},
		}
	}
</script>

<style lang="less" scoped>
	.bgIndex {
		position: relative;
		// padding: 23rpx;
		background-repeat: no-repeat;
		// background-size: cover;
		// background-image: url('http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-11/1b5f0202406111537307450.png');
		// width: 808rpx;
		// height: 730rpx;



		.tape {
			position: absolute;

			right: 0rpx;
			top: 30%;
			z-index: 999;
			height: 68rpx;
			left: 580rpx;
			border-radius: 40rpx;
			color: #fff;
			border-radius: 40rpx 0rpx 0rpx 40rpx;

			box-shadow: inset 0rpx 2rpx 8rpx 0rpx rgb(201, 134, 255);
			background: linear-gradient(90.00deg, rgb(40, 139, 255) 4.217%, rgb(143, 84, 254) 100%);

			.playerImg {
				width: 45rpx;
				height: 45rpx;
			}

			.audio {
				margin: 0 10rpx;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				height: 50rpx;
				width: 30%;

				.wave {
					width: 7px;
					margin: 0 2px;
					background-color: #4caf50;
					animation: audio-wave 1s infinite ease-in-out;

					&:nth-child(1) {
						animation-delay: 0.1s;
					}

					&:nth-child(2) {
						animation-delay: 0.2s;
					}

					&:nth-child(3) {
						animation-delay: 0.3s;
					}

					&:nth-child(4) {
						animation-delay: 0.4s;
					}

					&:nth-child(5) {
						animation-delay: 0.5s;
					}
				}
			}

			@keyframes audio-wave {
				0% {

					height: 6px;
					transform: translateY(0px);
					background: #ff8e3a;
				}

				25% {
					height: 6px;
					transform: translateY(0px);
					background: #9c73f8;
				}

				50% {
					height: 10px;
					transform: translateY(-5px) scaleY(1.5);
					background: #ed509e;
				}

				75% {
					height: 6px;
					transform: translateY(0px);
					background: #9c73f8;
				}

				100% {
					height: 6px;
					transform: translateY(0px);
					background: #0fccce;
				}
			}

		}



		.bottomLocation {
			width: 97%;
			position: absolute;
			bottom: 44rpx;
		}

		.topLocation {
			width: 97%;
			position: absolute;
			top: 0;
		}

		.img {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
		}

		.genderBtn {

			height: 34rpx;
			padding: 0 10rpx;
			border-radius: 100rpx;
			color: rgb(246, 91, 203);
			background: rgb(255, 236, 242);

			.genderImg {
				margin-right: 10rpx;
				vertical-align: middle;
				width: 18rpx;
				height: 18rpx;
			}

		}

		.followBtn {
			border-radius: 100rpx;
			width: 120rpx;
			height: 60rpx;
			color: #fff;
			background: linear-gradient(90.00deg, rgb(162, 101, 252), rgb(223, 111, 252) 100%);
		}

	}

	.serviceItemsContain {
		padding: 30rpx 30rpx 0 30rpx;
		background-color: #ececec;
		height: 50vh;
		height: auto;
		overflow-x: auto;

		.servicePersonnel {
			margin-bottom: 30rpx;
			width: 100%;

			border-radius: 20rpx;
			padding: 30rpx;
			background: rgb(255, 255, 255);

			.img {
				width: 104rpx;
				height: 104rpx;
				border-radius: 50%;
			}

			.genderBtn {

				height: 34rpx;
				padding: 3rpx 10rpx;
				border-radius: 100rpx;
				color: rgb(246, 91, 203);
				background: rgb(255, 236, 242);

				.genderImg {
					margin-right: 10rpx;
					vertical-align: middle;
					width: 9px;
					height: 9px;
				}
			}

			.goldBtn {
				margin-left: 10rpx;
				height: 34rpx;
				padding: 3rpx 10rpx;
				border-radius: 100rpx;
				color: rgb(255, 255, 255);


				background: linear-gradient(90.00deg, rgb(250, 190, 112) 0%, rgb(250, 199, 133) 100%);

				.goldImg {
					margin-right: 10rpx;
					vertical-align: middle;
					width: 20rpx;
					height: 20rpx;
				}

			}

			.switchingServices {
				width: 174rpx;
				height: 64rpx;
				border-radius: 200rpx;
				color: rgb(102, 102, 102);
				background: rgb(247, 247, 247);
			}

			.point {
				background: rgb(68, 215, 182);
				width: 13rpx;
				height: 13rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}

		}

		.makeAppointment {
			width: 856rpx;
			height: 154rpx;
			background-color: #fff;

			.makeAppointmentBtn {
				width: 232rpx;
				height: 96rpx;
				border-radius: 20rpx;
				color: #fff;
				background: linear-gradient(90.00deg, rgb(56, 144, 252) 0%, rgb(126, 92, 255) 100%);
			}
		}

		.top {
			padding: 15rpx 0;
			width: 100%;

			text {
				color: rgb(0, 0, 0);
				font-size: 36rpx;
				font-weight: 400;
			}
		}

		.content {

			width: 698rpx;
			height: auto;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background: rgb(255, 242, 242);

			.positionCoupon {
				padding: 8rpx;
				width: 154rpx;
				height: 50rpx;
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				color: rgb(255, 0, 0);
				background: rgb(255, 219, 219);
				font-size: 24rpx;
			}

			.couponPrice {
				padding: 20rpx 26rpx;

				.left {
					margin-right: 32rpx;
				}

				.claimNow {
					width: 144rpx;
					height: 58rpx;
					border-radius: 25rpx;
					color: #fff;
					background: rgb(255, 0, 0);
				}
			}
		}

		.bottom {
			border-radius: 600rpx;
			width: 662rpx;
			height: 96rpx;
			box-shadow: 0px 4px 4px 0px rgba(28, 197, 45, 0.2);
			background: rgb(255, 0, 0);
			color: #fff;
			position: fixed;
			bottom: 20rpx;
		}
	}

	.serviceDetails {
		padding: 20rpx;



		.achievementsImg {

			height: 362rpx;
		}

		.evaluateStars {

			height: 190rpx;
			border-radius: 20rpx;
			padding: 40rpx;

			background: rgb(242, 242, 242);
		}

		.evaluateList {
			margin-bottom: 45rpx;

			.img {
				width: 84rpx;
				height: 84rpx;
				border-radius: 50%;
			}

			.detailsText {
				margin: 20rpx 0 20rpx 86rpx;

				.evaluateImg {
					width: 176rpx;
					height: 176rpx;
					// border-radius: 20rpx;
					margin-top: 10rpx;

				}
			}

		}

		.line {
			width: 2rpx;
			height: 101rpx;
			border: 2rpx solid rgb(228, 227, 227);
		}

		.addTieziBtn {
			width: 710rpx;
			height: 100rpx;

			color: #fff;
			border-radius: 130rpx;

			background: linear-gradient(90.00deg, rgb(59, 142, 252), rgb(126, 92, 255) 100%);
			position: fixed;
			bottom: 20rpx;

			z-index: 999;
		}
	}
</style>